<template>
	<view>
		<view>
			<view class="page" v-for="(item,index) in page" :key="index">
				<view class="title">{{item.name}}</view>
				<view class="list u-flex num1">
					<view class="item u-flex" v-for="i in item.data" :key="i.id" 
						@click="jump(`/pages/more/mapping-detail?id=${i.id}&type=${i.mapping_classify_id}&url=${i.images}&name=${i.name}`)">
						<image :src="imgUrl(i.iconimage)"></image>
						<view>{{i.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:''
			}
		},
		onLoad() {
			this.$u.post('/api/mapping/index').then(res=>this.page = res)
		}
	}
</script>

<style lang="scss">
	.page{border-bottom: 12rpx solid #f4f4f4;
		&:last-child{border-bottom: 0;}
	}
	.title{font-weight: bold;font-size: 32rpx;padding: 40rpx 0 0 35rpx;}
	.list{
		flex-wrap: wrap;align-items: flex-start;padding: 30rpx 0;
		.item{width: 33.33%;flex-direction: column;justify-content: center;padding-top: 10rpx;
			image{width: 140rpx;height: 140rpx;display: block;}
			view{width: 100%;text-align: center;font-size: 30rpx;padding: 4rpx 0;}
		}
	}
</style>
